// 🎨 首页热门服务卡片间距测试脚本
// 可在微信开发者工具控制台运行，验证间距优化效果

console.log('🧪 开始测试首页热门服务卡片间距优化...')

/**
 * 测试卡片间距
 */
function testCardSpacing() {
  console.log('\\n=== 📏 测试卡片间距 ===')
  
  try {
    // 获取产品列表容器
    const productsList = document.querySelector('.products-list')
    if (!productsList) {
      console.warn('⚠️ 未找到产品列表容器')
      return false
    }
    
    // 检查容器样式
    const listStyles = getComputedStyle(productsList)
    console.log('📦 产品列表容器样式:')
    console.log(`  gap: ${listStyles.gap}`)
    console.log(`  padding: ${listStyles.padding}`)
    
    // 获取所有产品卡片
    const productCards = document.querySelectorAll('.product-card')
    console.log(`\\n🎯 找到 ${productCards.length} 个产品卡片`)
    
    // 检查卡片间距
    if (productCards.length >= 2) {
      const firstCard = productCards[0]
      const secondCard = productCards[1]
      
      const firstCardRect = firstCard.getBoundingClientRect()
      const secondCardRect = secondCard.getBoundingClientRect()
      
      const spacing = secondCardRect.top - firstCardRect.bottom
      console.log(`📐 实际卡片间距: ${Math.round(spacing)}px`)
      
      // 验证间距是否合理 (30rpx ≈ 15px on most devices)
      if (spacing >= 12 && spacing <= 25) {
        console.log('✅ 卡片间距正常')
        return true
      } else {
        console.warn(`⚠️ 卡片间距异常: ${spacing}px (期望: 12-25px)`)
        return false
      }
    } else {
      console.log('ℹ️ 卡片数量不足，无法测试间距')
      return true
    }
    
  } catch (error) {
    console.error('❌ 测试卡片间距失败:', error)
    return false
  }
}

/**
 * 测试边距设置
 */
function testPadding() {
  console.log('\\n=== 📱 测试边距设置 ===')
  
  try {
    const productsList = document.querySelector('.products-list')
    if (!productsList) {
      console.warn('⚠️ 未找到产品列表容器')
      return false
    }
    
    const styles = getComputedStyle(productsList)
    const paddingLeft = parseInt(styles.paddingLeft)
    const paddingRight = parseInt(styles.paddingRight)
    
    console.log(`📏 左边距: ${paddingLeft}px`)
    console.log(`📏 右边距: ${paddingRight}px`)
    
    // 验证边距 (20rpx ≈ 10px on most devices)
    if (paddingLeft >= 8 && paddingLeft <= 15 && paddingRight >= 8 && paddingRight <= 15) {
      console.log('✅ 左右边距设置正常')
      return true
    } else {
      console.warn(`⚠️ 边距设置异常: 左${paddingLeft}px 右${paddingRight}px (期望: 8-15px)`)
      return false
    }
    
  } catch (error) {
    console.error('❌ 测试边距失败:', error)
    return false
  }
}

/**
 * 测试图片高度
 */
function testImageHeight() {
  console.log('\\n=== 🖼️ 测试图片高度 ===')
  
  try {
    const productImages = document.querySelectorAll('.product-image')
    console.log(`🎯 找到 ${productImages.length} 个产品图片容器`)
    
    if (productImages.length === 0) {
      console.log('ℹ️ 暂无产品图片，可能正在加载中')
      return true
    }
    
    let allCorrect = true
    productImages.forEach((img, index) => {
      const height = img.getBoundingClientRect().height
      console.log(`📏 图片 ${index + 1} 高度: ${Math.round(height)}px`)
      
      // 验证高度 (240rpx ≈ 120px on most devices)
      if (height < 100 || height > 150) {
        console.warn(`⚠️ 图片 ${index + 1} 高度异常: ${height}px (期望: 100-150px)`)
        allCorrect = false
      }
    })
    
    if (allCorrect) {
      console.log('✅ 所有图片高度正常')
    }
    
    return allCorrect
    
  } catch (error) {
    console.error('❌ 测试图片高度失败:', error)
    return false
  }
}

/**
 * 测试加载状态一致性
 */
function testLoadingConsistency() {
  console.log('\\n=== ⏳ 测试加载状态一致性 ===')
  
  try {
    const loadingProducts = document.querySelector('.loading-products')
    const loadingCards = document.querySelectorAll('.loading-product-card')
    
    if (!loadingProducts && loadingCards.length === 0) {
      console.log('ℹ️ 当前无加载状态，数据已加载完成')
      return true
    }
    
    if (loadingProducts) {
      const styles = getComputedStyle(loadingProducts)
      console.log('📦 加载容器样式:')
      console.log(`  gap: ${styles.gap}`)
      console.log(`  padding: ${styles.padding}`)
    }
    
    console.log(`🎯 找到 ${loadingCards.length} 个加载卡片`)
    
    // 检查加载图片高度
    const loadingImages = document.querySelectorAll('.loading-product-image')
    loadingImages.forEach((img, index) => {
      const height = img.getBoundingClientRect().height
      console.log(`📏 加载图片 ${index + 1} 高度: ${Math.round(height)}px`)
    })
    
    console.log('✅ 加载状态样式检查完成')
    return true
    
  } catch (error) {
    console.error('❌ 测试加载状态失败:', error)
    return false
  }
}

/**
 * 综合测试报告
 */
function generateTestReport() {
  console.log('\\n=== 📊 生成测试报告 ===')
  
  const results = {
    cardSpacing: testCardSpacing(),
    padding: testPadding(), 
    imageHeight: testImageHeight(),
    loadingConsistency: testLoadingConsistency()
  }
  
  const passedTests = Object.values(results).filter(Boolean).length
  const totalTests = Object.keys(results).length
  
  console.log('\\n📋 测试结果总结:')
  console.log(`✅ 通过测试: ${passedTests}/${totalTests}`)
  console.log(`📊 通过率: ${Math.round(passedTests / totalTests * 100)}%`)
  
  if (passedTests === totalTests) {
    console.log('\\n🎉 所有测试通过！卡片间距优化效果良好')
  } else {
    console.log('\\n⚠️ 部分测试未通过，请检查相关样式设置')
  }
  
  return results
}

/**
 * 视觉对比测试
 */
function visualComparisonTest() {
  console.log('\\n=== 👀 视觉对比测试 ===')
  
  const recommendations = [
    '📱 在不同设备尺寸下查看效果',
    '🔄 滚动列表检查视觉一致性', 
    '⏳ 刷新页面观察加载状态',
    '👆 点击卡片测试交互反馈',
    '📏 与其他应用对比间距设计'
  ]
  
  console.log('🔍 建议进行以下视觉测试:')
  recommendations.forEach((rec, index) => {
    console.log(`${index + 1}. ${rec}`)
  })
}

/**
 * 运行所有测试
 */
function runAllTests() {
  console.log('🚀 开始运行所有卡片间距测试...')
  
  // 等待页面加载完成
  if (document.readyState !== 'complete') {
    console.log('⏳ 等待页面加载完成...')
    window.addEventListener('load', () => {
      setTimeout(() => {
        runTests()
      }, 500)
    })
  } else {
    runTests()
  }
}

function runTests() {
  const results = generateTestReport()
  visualComparisonTest()
  
  console.log('\\n💡 使用说明:')
  console.log('1. 如需重新测试，请运行: runAllTests()')
  console.log('2. 单独测试某项，运行对应函数，如: testCardSpacing()')
  console.log('3. 如有问题，请检查 miniprogram/pages/index/index.wxss 文件')
  
  return results
}

// 导出测试函数
if (typeof module !== 'undefined' && module.exports) {
  module.exports = {
    runAllTests,
    testCardSpacing,
    testPadding,
    testImageHeight,
    testLoadingConsistency,
    generateTestReport
  }
}

// 在小程序环境中自动运行
if (typeof wx !== 'undefined') {
  console.log('\\n🔄 在小程序环境中准备运行测试...')
  // 延迟执行，等待页面渲染完成
  setTimeout(() => {
    runAllTests()
  }, 1000)
}

console.log('\\n=== �� 卡片间距测试脚本准备完成 ===') 